<template>
	<myView :position="position" :zIndex="zIndex" :top="top" :right="right" :bottom="bottom" :left="left"
		:width="bgWidth" :height="beHeight" :borderRadius="bgBorderRadius" :padding="bgPadding" :marginTop="marginTop"
		:marginRight="marginRight" :marginBottom="marginBottom" :marginLeft="marginLeft" :background="background"
		:opaciity="opacity" :transition="transition" @confirm="confirm" :justfyContent="justfyContent"
		:alignItems="alignItems" v-if="src">
		<image :src="src" :mode="mode" v-if="isImg" :style="{
			width : $addUnit(width||size),
			height :$addUnit(height||width||size),
			borderRadius :$addUnit(borderRadius) }"/>
		<u-icon v-if="!isImg" :name="src" :size="size" :color="color" />
		<u-modal v-model="show" :content="'是否确认' +title+'? '" show-cancel-button @confirm="emit" ></u-modal>		
	</myView>
</template>

<script>
	export default {
		name:"myImg",
		props: {
			// 图片地址
			src: {
				type: String,
				default: ''
			},
			size:{
				type: [String, Number],
				default: ''
			},
			// 裁剪模式
			mode: {
				type: String,
				default: 'aspectFill'
			},
			// 宽度，单位任意 size 则失效
			width: {
				type: [String, Number],
				default: ''
			},
			// 高度，单位任意
			height: {
				type: [String, Number],
				default: ''
			},

			beHeight: {
				type: [String, Number],
				default: ''
			},
			color: {
				type: String,
				default: '#47484d'
			},
			//确认标题提示
			title: {
				type: String,
				default: ''
			},
			right: {
				type: [String, Number],
				default: ''
			},
			//相对位置
			position: {
				type: String,
				default: ''
			},
			//位置
			zIndex: {
				type: [String, Number],
				default: ''
			},
			top: {
				type: [String,Number],
				default:''
			},
			bottom: {
				type: [String,Number],
				default:''
			},
			marginTop: {
				type: [String,Number],
				default:''
			},
			marginRight: {
				type: [String,Number],
				default:''
			},
			marginBottom: {
				type: [String,Number],
				default:''
			},
			marginLeft: {
				type: [String,Number],
				default:''
			},
			
			left: {
				type: [String,Number],
				default:''
			},
			background: {
				type: [String,Number],
				default:''
			},
			//透明度
			opacity: {
				type: [String,Number],
				default:''
			},
			transition: {
				type: [String,Number],
				default:''
			},
			alignItems: {
				type: String,
				default: ''
			},
			justfyContent: {
				type: String,
				default: ''
			},
			// 圆角，单位任意
			borderRadius: {
				type: [String, Number],
				default: ''
			},
			bgBorderRadius: {
				type: [String, Number],
				default: ''
			},
			bgPadding: {
				type: [String, Number],
				default: ''
			},
			//背景宽度
			bgWidth: {
				type: [String, Number],
				default: ''//88
			},
			//背景高度
			bgHeight: {
				type: [String, Number],
				default: ''//64
			},
			//是否开启预览
			preView: {
				type: Boolean,
				default: false
			},
			//是否需要确认
			showConfirm: {
				type: Boolean,
				default: false
			},
			
		},
		data() {
			return {
				show: false, //弹窗确认
			};
		},
		option: {
			multipleSlots: true,
			styleIsolation: "isolated",
			addGlobalClass: true,
			virtualHost:true,
		},
		computed: {
			//判断传入的src属性是否图片路径，只要带有 / 为图片格式
			isImg(){
				return this.src.indexOf('/') !== -1
			},
		},
		methods: {
			confirm() {
				if(this.preView) {
					//如果开启预览，那就只触发预览
					this.$preView(this.src);
				}else{
					//是否需要确认
					if(this.showConfirm) {
						this.show = true;
					}else{
						this.emit();
					}
				}
			},
			emit(){
				this.$emit('confirm');//确认
			}
		}
	}
</script>

<style lang="scss">

</style>